<template>
	<view style="margin-top: 88upx;">
		<view style="position: fixed;top: 88upx + var(--status-bar-height);left: 0;width: 100%;height: 100%;">
			<view class="nav-Order">
				<view class="nav-header">
					<view class="nav-header-left">切换栏目</view>
					<view class="nav-header-right">
						<view class="nav-order" @click="allowTurnOrder">排序</view>
						<view class="arrow-up" @click="hideNavOrder">&#xe608;</view>
					</view>
				</view>
				<view class="mui-content">
					<view class="mark-big" v-show="markBig"></view>
					<view class="mark-small" v-show="!markBig"></view>
					<movable-area class="nav" :style="{height:areaHeight * height + 'rpx'}" id="drag">
						<movable-view v-for="(item,index) in currentList" :key="nn" :data="index"
						animation=true
						:x="item.x"
						:y="item.y"
						inertia=false
						:class="index<2?'nav-item':(sureTurn?'nav-border':'nav-item')"
						@change="test"
						@touchstart="touchstart"
						@touchmove="touchmove"
						@touchend="touchend"
						catchtouchstart
						catchtouchmove
						catchtouchend
						direction="all"
						>{{item.name}}</movable-view>
					</movable-area>
				</view>	
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			list:{type:Array},
			newsList:{type:Array},
			width:{type:Number}
		},
		data() {
			return {
				markBig:true,
				changed:false,
				isflag:false,
				sureTurn:false,
				areaHeight:0,
				height: 55, // 高度
				currentList: [],
				active: -1, // 当前激活的item
				index: -1, // 当前激活的item的原index
				Nindex:-1, //当前新的index
				Oindex:-1, //记录上
				topY: 0, // 距离顶部的距离
				deviationY: 0, // 偏移量
				deviationX:0,
				nn:0,
				ifchangeed:false
			};
		},
		mounted(){
			this.onUpdateCurrentList()
		},
		methods:{
			test(e){
				this.changed = true
			},
			onUpdateCurrentList(){
				this.changed = false;
				this.currentList = []
				let arr = [];
				for(const key in this.list){
					arr.push({
						...this.list[key],
						index:Number(key),
						y: Math.floor(key/4) * this.height,
						x: key%4 * this.width*0.22 + (key%4)* this.width*0.04, 
						animation: true,
						nn:this.nn++
					})
				}
					this.nn = this.nn + 1
					this.currentList = arr
					this.areaHeight = Math.ceil(this.currentList.length/4) * 2
			},
			touchstart(e){
				uni.pageScrollTo({
					scrollTop: 1,
					duration: 0
				});
				this.isflag = true;
				this.changed = false;
				this.ifchangeed = true;
				//计算y轴的位置  ==》 小程序计算  
				var query = wx.createSelectorQuery()
				query.select('#drag').boundingClientRect() //可移动区域
				query.exec((res)=>{
					this.topY = res[0].top //获取元素的top值
					let touchY = e.mp.touches[0].clientY - res[0].top  //
					this.deviationY = touchY / this.height //第几行
					this.deviationX = e.mp.touches[0].clientX / (this.width*0.25) //第几列
					let indexY = Math.floor(this.deviationY)
					let indexX = Math.floor(this.deviationX) + 1
					let check = indexY*4 + indexX - 1 //获得点击的index 从0开始 
					this.index = check;
					this.Oindex = check
					if(this.index >= this.list.length) this.index = this.list.length-1 
 				})
					
			},
			touchmove(e){
				uni.pageScrollTo({
					scrollTop: 1,
					duration: 0
				});
				e.preventDefault();
				var query = wx.createSelectorQuery()
				query.select('#drag').boundingClientRect() //可移动区域
				query.exec((res)=>{
					if(this.isflag && this.changed){
						this.topY = res[0].top //获取元素的top值
						let touchY = e.mp.touches[0].clientY - res[0].top  //
						this.deviationY = touchY / this.height //第几行
						if(e.mp.touches[0].clientX<0){
							e.mp.touches[0].clientX = 0;
						}
						this.deviationX = e.mp.touches[0].clientX / (this.width*0.22 + this.width*0.04) //
						let indexY = Math.floor(this.deviationY)
						let indexX = Math.floor(this.deviationX) + 1
						let check = indexY*4 + indexX - 1 //获得移动到的index 从0开始 
						if(check<0){
							check=this.Oindex;
						}
						this.Nindex = check;
						if(this.Nindex <2) this.Nindex = 2
						if(this.Nindex >= this.list.length) this.Nindex = this.list.length-1 
						var narr = this.currentList;

						this.Oindex = this.Nindex
						if(this.index>this.Nindex){
							for(let i=2;i<this.Nindex;i++){
								this.currentList[i].y= Math.floor((i)/4) * this.height;
								this.currentList[i].x=(i)%4 * this.width*0.22 + (i)%4* this.width*0.04;
							}
							for(let i=this.index;i<this.currentList.length;i++){
								this.currentList[i].y= Math.floor((i)/4) * this.height;
								this.currentList[i].x=(i)%4 * this.width*0.22 + (i)%4* this.width*0.04;
							}
							for(let i =this.Nindex;i<this.index;i++){
								this.currentList[i].y= Math.floor((i+1)/4) * this.height;
								this.currentList[i].x=(i+1)%4 * this.width*0.22 + (i+1)%4* this.width*0.04;
							}	
						}else{
							for(let i=2;i<this.index;i++){
								this.currentList[i].y= Math.floor((i)/4) * this.height;
								this.currentList[i].x=(i)%4 * this.width*0.22 + (i)%4* this.width*0.04;
							}
							for(let i=this.Nindex;i<this.currentList.length;i++){
								this.currentList[i].y= Math.floor((i)/4) * this.height;
								this.currentList[i].x=(i)%4 * this.width*0.22 + (i)%4* this.width*0.04;
							}
							for(let i =this.index;i<this.Nindex;i++){
								this.currentList[i+1].y= Math.floor((i)/4) * this.height;
								this.currentList[i+1].x=(i)%4 * this.width*0.22 + (i)%4* this.width*0.04;
							}
						}
					}
				})
			},
			touchend(e){
				var that = this;
				this.isflag = false;
				if(this.changed){
					if(this.Nindex>=this.list.length||this.Nindex<=1){
						this.onUpdateCurrentList()
						return
					}else{
						//修改头部列表排序 
						//console.log(this.Nindex)
						var item = this.list[this.index];
						this.list.splice(this.index,1)
						this.list.splice(this.Nindex,0,item)
						//修改正文的列表排序
						var tabitem = this.newsList[this.index]
						this.newsList.splice(this.index,1)
						this.newsList.splice(this.Nindex,0,tabitem)
						this.index = 0;
						this.Nindex = 0;
					}
				}
					this.changed = false
			},
			allowTurnOrder:function(){
				if(this.ifchangeed){
					uni.setStorageSync('locallsit', this.list);
				}
				this.ifchangeed = false;
				this.markBig = !this.markBig
				this.sureTurn = !this.sureTurn
			},
			//隐藏拖拽菜单
			hideNavOrder:function(){
				if(this.ifchangeed){
					uni.setStorageSync('locallsit', this.list);
				}
				this.ifchangeed = false;
				this.$emit('hideNavOrder')	
			},
		},
		watch: {
		  list () {
		    this.onUpdateCurrentList()
		  },
		  deep: true
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('../../static/font/iconfont.ttf') format('truetype');
	}
	html{
		 height: 100%;
	}
	body{
		 height: 100%;
		position: relative;
	}
	.nav-Order{
	    position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		top: 0;
		z-index: 1000000;
		width: 100%;
		.nav-header{
			/*height: .74rem;*/
			height: 88upx;
			background:rgba(17,96,151,1);
			display: flex;
			flex-direction: row;
			justify-content:space-between;
			.nav-header-left{
				padding-left: 32upx;
				color: #ffffff;
				line-height: 88upx;
				font-size: 28upx;
			}
			.nav-header-right{
				display: flex;
				flex-direction: row;
				padding-right: 0upx;
				color: #ffffff;
				line-height: 88upx;
				.nav-order{
					width: 118upx;
					height: 42upx;
					font-size: 24upx;
					border-radius:18upx;
					border: 1px solid #FFFFFF;
					text-align: center;
					line-height: 40upx;
					margin-top: 23upx;
				}
				.arrow-up{
					font-size: 30upx;
					// margin-left: 36upx;
					line-height: 88upx;
					width: 90upx;
					text-align: center;
					font-family: texticons;
				}
			}
		}
		.mui-content{
			padding: 60upx;
			background: rgba(20,45,95,0.98);
			position: absolute;
			top: 88upx;
			bottom: 0;
			width: 100%;
			box-sizing:border-box;
		}
	}
	.nav{
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		.nav-item{
			width: 22%;
			height: 80upx;
			border: 1px solid #ddd;
			box-sizing: border-box;
			color: #FFFFFF;
			text-align: center;
			line-height: 80upx;
			font-size: 28upx;
			// display: flex;
			// position: absolute !important;
		}
		.nav-border{
			width: 22%;
			height: 80upx;
			border: 1px dashed #ddd;
			box-sizing: border-box;
			color: #FFFFFF;
			text-align: center;
			line-height: 80upx;
			font-size: 28upx;
		}
	}
	.mark-big{
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		background: transparent;
		z-index: 1000000;
	}
	.mark-small{
		position: absolute;
		width: 40%;
		height: 80upx;
		background: transparent;
		z-index: 1000000;
	}
	
</style>
